<template>
	<view class="addr-box">
		<my-address></my-address>
	</view>
	<view class="cart-box" v-if="cartList.length>0">
		<view class="cart-title">
			<uni-icons type="shop" size="20"></uni-icons>
			<text>购物车</text>
		</view>
		<uni-swipe-action>
			<view class="cart-list">
				<uni-swipe-action-item :right-options="options" @click="swipeActionClickHandler(item)" v-for="(item,i) in cartList" :key="i">
					<my-cart @number-change="numberChangeHandler" @radio-change="radioChangeHandler" :show-radio="true" :show-num="true" :goods="item"></my-cart>
				</uni-swipe-action-item>
			</view>
		</uni-swipe-action>
	</view>
	<view v-else class="empty">
		<image src="/static/cart_empty@2x.png" mode="widthFix"></image>
	</view>
	<my-settle></my-settle>
</template>

<script>
	import { mapState } from 'vuex'
	import { mapGetters } from 'vuex'
	import {mapMutations} from 'vuex'
	import badgeMix from '@/mixins/tabbar-badge.js'
	export default {
		mixins: [badgeMix],
		data() {
			return {
				options: [{
							text: '删除', // 显示的文本内容
							style: {
								backgroundColor: '#C00000' // 按钮的背景颜色
							}
						}]
			};
		},
		onLoad(){
			
		},
		watch: {
		    // 监听 total 值的变化
		    total() {
		      uni.setTabBarBadge({
		        index: 2,
		        text: this.total + '', // 注意：text 的值必须是字符串，不能是数字
		      })
		    }
		},
		methods:{
			...mapMutations('cart',['updateCartState','updateCartCount','deleteCartById']),
			radioChangeHandler(e){
				this.updateCartState(e)
			},
			numberChangeHandler(val){
				this.updateCartCount(val)
			},
			swipeActionClickHandler(goods) {
			  this.deleteCartById(goods.goods_id)
			}
		},
		computed: {
			...mapState({
			   cartList: state => state.cart.cartList,
			}),
			...mapGetters('cart',['total'])
		}
	}
</script>

<style lang="scss">
	.cart-title{
		display: flex;
		align-items: center;
		height: 50px;
		text{
			margin-left: 10px;
		}
		font-size: 15px;
		border-bottom: #efefef 1px solid;
	}
	.addr-box{
		height: 200rpx;
	}
	.cart-box{
		padding-bottom: 30px;
	}
	.empty{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: auto;
		margin-top: 50px;
		image{
			width: 50%;
		}
	}
</style>
